<%@page import="com.xnx3.wangmarket.Authorization"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.xnx3.com/java_xnx3/xnx3_tld" prefix="x" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<jsp:include page="/wm/common/head.jsp">
	<jsp:param name="title" value="客服坐席绑定"/>
</jsp:include>

<style>
body{
	background: white;
}
.myForm{
	margin: 0 auto;
    width: 495px;
    height: auto;
    border-width: 1px 1px 1px 1px;
    padding: 0px;
    border-radius: 20px;
    overflow: hidden;
    -webkit-box-shadow: 0 0 10px #e2e2e2;
    -moz-box-shadow: 0 0 10px #e2e2e2;
    box-shadow: 0 0 10px #e2e2e2;
    position: absolute;
    left: 50%;
    top: 45%;
    margin-left: -248px;
    margin-top: -230px;
}
#divCode{
	padding:20px;
}

@media screen and (max-width:600px){
	.myForm{
		margin: 0 auto;
	    width: 100%;
	    height: 100%;
	    border-width: 0px;
	    padding: 0px;
	    border-radius: 0px;
	    overflow: auto;
	    -webkit-box-shadow: 0 0 0px #e2e2e2;
	    -moz-box-shadow: 0 0 0px #e2e2e2;
	    box-shadow: 0 0 0px #e2e2e2;
	    position: static;
	    left: 0px;
	    top: 0px;
	    margin-left: 0px;
	    margin-top: 0px;
	}
	.touming{
    	margin-bottom: -15px;
    	margin-bottom: 5px;
	}
}
</style>

<form class="layui-form layui-elem-quote layui-quote-nm myForm">
  <div class="layui-form-item touming" style="height: 70px;background-color: #eeeeee;line-height: 70px;text-align: center;font-size: 25px;color: #3F4056;">
	    开启离线消息通知
	  </div>
  <div style="padding: 30px 50px 40px 0px;">
  	<div class="layui-form-item">
	    <label class="layui-form-label">用户名</label>
	    <div class="layui-input-block">
	      <input type="text" name="username" required  lay-verify="required" placeholder="登录使用。只限英文或数字" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label"> 密 码&nbsp;&nbsp; </label>
	    <div class="layui-input-block">
	      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label"> 验证码 </label>
	    <div class="layui-input-block">
		    	<input type="text" name="code" placeholder="请输入右侧验证码" class="layui-input" id="thisIdIsimgCode" style="float: left;width: 100px" />
		    	<img id="thisIdIsimgCodeImage" src="/captcha.do" onclick="reloadCode();" style="height: 29px;width: 110px; cursor: pointer;" />
		    
	    </div>
	  </div>
	
	  <div class="layui-form-item" style="    padding-top: 10px;">
	    <div class="layui-input-block">
	      <a class="layui-btn" lay-submit lay-filter="formDemo" href="javascript:;">登录并绑定</a>
	    </div>
	  </div>
  </div>
</form>
<div style="padding:1rem; color:gray;">
	在此登录您的客服账号，当您这客服不在线时，客户有询问的，您就能收到微信消息通知了。
</div>

<script type="text/javascript">
//重新加载验证码
function reloadCode(){
	var code=document.getElementById('thisIdIsimgCodeImage');
	//这里必须加入随机数不然地址相同我发重新加载
	code.setAttribute('src','/captcha.do?'+Math.random());
}
</script>

<iframe src="" id="kefuIframe" style="display:none;" ></iframe>
<!--[if IE]>
	<div style="position: absolute;bottom: 0px;padding: 10px;text-align: center;width: 100%;background-color: yellow;">建议使用<a href="https://www.baidu.com/s?wd=Chrome" target="_black" style="text-decoration:underline">Chrome(谷歌)</a>、<a href="https://www.baidu.com/s?wd=Firefox" target="_black" style="text-decoration:underline">Firefox(火狐)</a>浏览器，IE浏览器可能无法操作！</div>
<![endif]-->

<script type="text/javascript">
//Demo
layui.use('form', function(){
  var form = layui.form;
  
  //监听提交
  form.on('submit(formDemo)', function(data){
	msg.loading('绑定中');
    var d=$("form").serialize();
	$.post("bind.json", d, function (result) { 
		console.log(result);
		msg.close();
       	var obj = JSON.parse(result);
       	if(obj.result == '1'){
       		msg.success('绑定成功！', function(){
       			document.getElementById('kefuIframe').src = 'sendTest.do?chatid='+obj.chatid;
       		});
       	}else if(obj.result == '0'){
       		msg.failure(obj.info);
       	}else{
       		msg.failure('操作失败');
       	}
	}, "text");
    return false;
  });
});
</script>

<script type="text/javascript">
//重新加载验证码
function reloadCode(){
	var code=document.getElementById('thisIdIsimgCodeImage');
	//这里必须加入随机数不然地址相同我发重新加载
	code.setAttribute('src','/captcha.do?'+Math.random());
}
</script>

<jsp:include page="/wm/common/foot.jsp"></jsp:include>